<template>
  <Row class="layout-content-body">
    <dtable :columns="columns"
            :dataAll="dataAll"
            :dataShow="dataShow"
            :totals="total"
            add delCheck
            @refresh="getall()"
            @add="add"
            @del="del"
            @edit="edit"
            @delCheck="delCheck"
            @changePage="changePage" v-loading="spinShow"></dtable>
    <Modal
      title="直播频道信息"
      v-model="editData"
      width="600"
      :mask-closable="false" class="editm"
      @on-ok="asyncOK"
      @on-cancel="asyncCancel">
      <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
        <Form-item label="频道标题" prop="Title">
          <Input v-model="formItem.Title" placeholder="请输入" @on-enter="asyncOK()"></Input>
        </Form-item>
        <Form-item label="虚拟域名" prop="Vhost">
          <Input v-model="formItem.Vhost" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="频道标识" prop="Stream">
          <Input v-model="formItem.Stream" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="是否录制" prop="Type">
          <Radio-group v-model="formItem.Type">
            <Radio label="0">不录制</Radio>
            <Radio label="1">录制</Radio>
          </Radio-group>
        </Form-item>
        <Form-item label="状态" prop="Status">
          <Radio-group v-model="formItem.Status">
            <Radio label="1">启用</Radio>
            <Radio label="0">停用</Radio>
          </Radio-group>
        </Form-item>
        <Form-item label="发布范围" prop="Scope">
          <Radio-group v-model="formItem.Scope">
            <Radio label="2" v-if="getScope">全系统</Radio>
            <Radio label="1">全单位</Radio>
            <Radio label="0">本部门</Radio>
            <Radio label="3" >指定用户</Radio>
          </Radio-group>
        </Form-item>
        <Form-item  v-if="formItem.Scope==='3' || formItem.Scope===3">
          <Transfer
            :titles="['未授权', '已授权']"
            :data="TransData"
            :target-keys="targetKeys"
            :render-format="render"
            @on-change="handleChange"></Transfer>
        </Form-item>
        <Form-item label="说明" prop="Remark">
          <Input v-model="formItem.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入...">
          </Input>
        </Form-item>
      </Form>
    </Modal>
  </Row>
</template>
<script>
  import api from '../../api'
  import {mapMutations, mapGetters, mapState} from 'vuex'
  import dtable from '../../components/table/btable.vue'//采用biztable
  import moment from "moment"
  export default{
    data(){
      return {
        loading: true,//点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动设置visible来关闭对话框
        spinShow: false,//数据刷新遮罩层
        columns: [
          //多选框
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '名称',
            key: 'Title',
            sortable: true
          },
          {
            title: '访问地址',
            key: 'Url',
            sortable: true,
          },
          {
            title: '所属单位',
            key: 'OrgName',
            sortable: true
          },
          {
            title: '是否录制',
            key: 'Type',
            sortable: true,
            render (h, {row, column, index}) {
              // return `<span>${(row.Type === 0) ? '不录制' : '录制'}</span>`;
              return h('span', {}, row.Type === 0 ? '不录制' : '录制')
            }
          },
          {
            title: '范围',
            key: 'Sname',
            width: 80,
            sortable: true,
          },
          {
            title: '创建者',
            key: 'Creater',
            sortable: true
          },
          {
            title: '发布时间',
            key: 'Ctime',
            sortable: true,
            render (h, {row, column, index}) {
              // return `<span>${row.Ctime.slice(0,10)}</span>`;
              return h('span', {}, row.Ctime.slice(0,10))
            }
          },
          {
            title: '最后修改者',
            key: 'Updater',
            sortable: true
          },
          {
            title: '最后修改时间',
            key: 'Utime',
            sortable: true,
            render (h, {row, column, index}) {
              // return `<span>${row.Ctime.slice(0,10)}</span>`;
              return h('span', {}, row.Utime.slice(0,10))
            }
          },
          {
            title: '状态',
            key: 'status',
            width: 80,
            sortable: true,
            render(h, { row, column, index }) {
              // return `<span>${(row.Status === 0) ? '正常' : '停用'}</span>`;
              return h("span", {}, row.Status === 1 ? "正常" : "停用");
            }
          },
          {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, { row, column, index }) => {
            // return `<i-button type="primary" size="small" @click="edit(${index})">修改</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click:() => {
                      // console.log(index)
                      this.edit(row);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click:() => {
                      this.remove(row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
        ],//表格样式
        dataAll: [],//表格数据来源
        dataShow: true,//是否显示表格数据查看表单
        editData: false,//显示编辑表单
        formItem: {
          Title: '',
          Stream: '',
          Scope: 0,
          Type: 0,
          Vhost: 'live',
          Url: '',
          OrgName: '',
          Status: 1,
          Remark: '',
          users:this.targetKeys
        },//数据编辑表单
        ruleValidate: {
          Title: [
            {required: true, message: '标题不能为空', trigger: 'blur'}
          ],
          Stream: [
            {required: true, message: '标识不能为空', trigger: 'blur'}
          ],
          Vhost: [
            {required: true, message: '虚拟域名不能为空', trigger: 'blur'}
          ],

        },//数据编辑表单验证规则
        addid: true,//true为修改模式，false为添加模式
//        role: [],
        org: [],
        total: 0,
        optionsDate: {
          shortcuts: [
            {
              text: '最近一周',
              value () {
                const end = new Date();
                const start = new Date();
                end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
                return [start, end];
              }
            },
            {
              text: '最近一个月',
              value () {
                const end = new Date();
                const start = new Date();
                end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
                return [start, end];
              }
            },
            {
              text: '最近三个月',
              value () {
                const end = new Date();
                const start = new Date();
                end.setTime(end.getTime() + 3600 * 1000 * 24 * 90);
                return [start, end];
              }
            }
          ]
        },
        TransData: [],
        targetKeys: [],
      }
    },
    components: {
      dtable,
    },
    computed: {
      ...mapState(['isLogin', 'captchaUrl', 'cptId', 'msg', 'userInfo', 'role']),
      getRtime(){
        let rtime = []
        rtime.push(this.formItem.Btime, this.formItem.Etime)
        return rtime
      },
      getScope(){
        if (this.role.Type>0){
          return false
        }else{
            return true
        }
      }
    },
    watch: {},
    methods: {
      //富文本框内容对应
      updateData(data) {
        // sync content to component
        this.formItem.Content = data
      },
      //     获取资源名称
      getNameById(value) {
        let rname = ""
        if (value || '') {
          let rv = this.dataAll.filter((col, index) => col.Id === value)
          rname = rv[0].Name
        }
        return rname
      },
      //      改变页码
      changePage (pagedata) {
        this.spinShow = true
        api.getBulletin(pagedata).then(response => {
          if (response.data.code === 0) {
            this.total = response.data.Data.total
            this.dataAll = response.data.Data.tabledata

          } else {
            this.$Message.error(this.msg)
          }
        })
        setTimeout(() => {
          this.spinShow = false;
        }, 500);
      },
      getall (){
        let pagedata = {
          pagesize: 10,
          page: 1
        }
        this.spinShow = true
        api.getLiveChannel(pagedata).then(response => {
          if (response.data.code === 0) {
            this.total = response.data.Data.total
            this.dataAll = response.data.Data.tabledata
          } else {
            this.$Message.error(this.msg)
          }
        }, error => {
          this.$Message.error(this.msg, 4)
        })
        setTimeout(() => {
          this.spinShow = false;
        }, 300);
      },
      getUser (){
        api.GetAllOrgUsers().then(response => {
          if (response.data.code === 0) {
            this.TransData = response.data.Data
          } else {
            this.$Message.error(this.msg)
          }
        }, err => {
          this.$Message.error(this.msg, 4)
        })
      },
      getLiveUser (index){
        api.GetLiveUserByLive(index).then(response => {
          if (response.data.code === 0 && response.data.Data) {
                this.targetKeys = response.data.Data
          }else {
            this.targetKeys =[]
          }
        })
      },
      edit(index){
        console.log(index)
        this.getLiveUser(index.Id)
        this.addid = true
        this.formItem = index
//        this.formItem.Rtime = this.getRtime
        this.editData = true
      },
      add(){
        this.targetKeys=[]
        this.addid = false
        this.$refs['editForm'].resetFields()
        this.formItem.Rtime = this.getRtime
        this.editData = true
      },
      asyncOK(){
        this.formItem.users=this.targetKeys
          console.log(this.formItem)
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            if (this.addid) {
              api.updateLiveChannel(this.formItem).then(response => {
                if (response.data.code === 0) {
                  this.getall()
                  this.$Message.success(this.msg)
                } else {
                  this.$Message.error(this.msg, 4)
                }
              }, err => {
                this.$Message.error(this.msg, 4)
              })
            } else if (!this.addid) {
              api.addLiveChannel(this.formItem).then(response => {
                if (response.data.code === 0) {
                  this.getall()
                  this.$Message.success(this.msg)
                } else {
                  this.$Message.error(this.msg, 4)
                }
              }, err => {
                this.$Message.error(this.msg, 4)
              })
            }
            setTimeout(() => {
              this.editData = false;
            }, 1000);
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
        this.editData = false
        this.$refs['editForm'].resetFields()

      },
      asyncCancel(){
        this.getall()
        this.$refs['editForm'].resetFields()
      },
      remove(row) {
        this.$Modal.confirm({
          title: '警告',
          content: '确认删除吗',
          onOk: () => {
            this.del(row)
          }
        })
      },
      del(row){
        api.deleteLiveChannel(row).then(response => {
          if (response.data.code === 0) {
            this.getall()
            this.$Message.success(this.msg)
          } else {
            this.$Message.error(this.msg, 4)
          }
        }, err => {
          this.$Message.error(this.msg, 4)
        })
      },
      delCheck(row){
        api.deleteLiveChannels(row).then(response => {
          if (response.data.code === 0) {
            this.getall()
            this.$Message.success(this.msg)
          } else {
            this.$Message.error(this.msg, 4)
          }
        }, err => {
          this.$Message.error(this.msg, 4)
        })
      },
      render (item) {
        return item.label;
      },
      handleChange(newTargetKeys, direction, moveKeys) {
        console.log(newTargetKeys);
        console.log(direction);
        console.log(moveKeys);
        this.targetKeys = newTargetKeys;
      }

    },
    mounted (){
      let self = this
      self.getall()
      self.getUser()
    }
  }
</script>
